<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<!--上面两个引入后才可以引入自己的js文件-->
		<link rel="stylesheet" href="css/bootstrap.css" />
		<!--上面引入后才可以引入自己的css文件-->
	</head>

	<body>
		<table class="table">
			<caption>基本的表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
				</tr>
			</tbody>
		</table>

		<table class="table table-striped">
			<caption>条纹表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
					<th>密码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
					<td>400003</td>
				</tr>
				<tr>
					<td>Uma</td>
					<td>Pune</td>
					<td>411027</td>
				</tr>
			</tbody>
		</table>

		<table class="table table-bordered">
			<caption>边框表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
					<th>密码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
					<td>400003</td>
				</tr>
				<tr>
					<td>Uma</td>
					<td>Pune</td>
					<td>411027</td>
				</tr>
			</tbody>
		</table>

		<table class="table table-hover">
			<caption>悬停表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
					<th>密码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
					<td>400003</td>
				</tr>
				<tr>
					<td>Uma</td>
					<td>Pune</td>
					<td>411027</td>
				</tr>
			</tbody>
		</table>

		<table class="table table-condensed">
			<caption>精简表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
					<th>密码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
					<td>400003</td>
				</tr>
				<tr>
					<td>Uma</td>
					<td>Pune</td>
					<td>411027</td>
				</tr>
			</tbody>
		</table>

		<table class="table">
			<caption>上下文表格布局</caption>
			<thead>
				<tr>
					<th>产品</th>
					<th>付款日期</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody>
				<tr class="active">
					<td>产品1</td>
					<td>23/11/2013</td>
					<td>待发货</td>
				</tr>
				<tr class="success">
					<td>产品2</td>
					<td>10/11/2013</td>
					<td>发货中</td>
				</tr>
				<tr class="warning">
					<td>产品3</td>
					<td>20/10/2013</td>
					<td>待确认</td>
				</tr>
				<tr class="danger">
					<td>产品4</td>
					<td>20/10/2013</td>
					<td>已退货</td>
				</tr>
			</tbody>
		</table>
		
		<div class="table-responsive">
			<table class="table">
			<caption>响应式表格布局</caption>
			<thead>
				<tr>
					<th>产品</th>
					<th>付款日期</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>产品1</td>
					<td>23/11/2013</td>
					<td>待发货</td>
				</tr>
				<tr >
					<td>产品2</td>
					<td>10/11/2013</td>
					<td>发货中</td>
				</tr>
				<tr >
					<td>产品3</td>
					<td>20/10/2013</td>
					<td>待确认</td>
				</tr>
				<tr >
					<td>产品4</td>
					<td>20/10/2013</td>
					<td>已退货</td>
				</tr>
			</tbody>
		</table>
		</div>
	</body>

</html>